<!-- 柱状图组件：用于展示数据的柱状图表可视化 -->
<template>
  <!-- 图表容器 -->
  <div ref="barChart" class="chart"></div>
</template>

<script>
// 导入必要的 Vue 组合式 API 函数
import { ref, onMounted, watch, onUnmounted } from 'vue'
// 导入 ECharts 图表库
import * as echarts from 'echarts'

export default {
  name: 'BarChart',
  props: {
    // 接收数据属性，期望格式为 [{name: string, value: number}]
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  setup(props) {
    // 图表 DOM 引用
    const barChart = ref(null)
    // ECharts 实例
    let chart = null

    /**
     * 初始化图表配置和数据
     * 设置柱状图的样式、动画、颜色等属性
     */
    const initChart = () => {
      if (!barChart.value) return
      
      chart = echarts.init(barChart.value)
      const option = {
        // 提示框配置
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 鼠标悬停时显示阴影
          }
        },
        // 图表边距设置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // X轴配置
        xAxis: [
          {
            type: 'category',
            data: props.data.map(item => item.name),
            axisTick: {
              alignWithLabel: true // 刻度线和标签对齐
            }
          }
        ],
        // Y轴配置
        yAxis: [
          {
            type: 'value'
          }
        ],
        // 数据系列配置
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%', // 柱条宽度
            data: props.data.map(item => item.value),
            // 柱条样式配置
            itemStyle: {
              // 设置渐变色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      chart.setOption(option)
    }

    /**
     * 更新图表数据
     * 当数据变化时重新渲染图表
     */
    const updateChart = () => {
      if (chart) {
        chart.setOption({
          xAxis: [{
            data: props.data.map(item => item.name)
          }],
          series: [{
            data: props.data.map(item => item.value)
          }]
        })
      }
    }

    // 监听数据变化，触发图表更新
    watch(() => props.data, () => {
      updateChart()
    }, { deep: true })

    // 组件挂载时初始化图表并添加窗口大小变化监听
    onMounted(() => {
      initChart()
      window.addEventListener('resize', () => {
        chart && chart.resize()
      })
    })

    // 组件卸载时清理图表实例和事件监听
    onUnmounted(() => {
      if (chart) {
        chart.dispose()
        chart = null
      }
    })

    return {
      barChart
    }
  }
}
</script>

<style scoped>
/* 图表容器样式 */
.chart {
  width: 100%;
  height: 100%;
}
</style> 